<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动定位</title>
		<style>
			/*每个div设置宽高: 300px, 倒角50%, 设置字体: 10em, 垂直居中*/
			/*每个div额外添加颜色: 自定*/
			span{
				width: 300px;
				height: 300px;
				border-radius: 50%;
				font-size: 10em;
				text-align: center;
				line-height: 300px;
				color: #fff;
				/*盒子阴影: 块级元素上*/
				/*盒子阴影属性值: X Y 模糊半径 扩散半径 内外阴效果 颜色 内外阴效果*/
				box-shadow:  5px 5px 100px 20px #aaffff inset;
				/*浮动属性*/
				float:left;
				fl oat:right;
				fl oat:none;
			}
			span.d1{
				background-color: #aaff00;
			}
			span.d2{
				background-color: #ff5500;
			}
			span.d3{
				background-color: #aa55ff;
				/*清除浮动：clear属性:left*/
				clear:left;
			}
			span.d4{
				background-color: #ffaaff;
				/*清除浮动：clear属性：both 两端浮动，效率低*/
				clear:both;
			}
			span.d5{
				background-color: #55ffff;
			}
		</style>
	</head>
	<body>
		<!-- 定位: 将元素指定到页面某个特定的位置上 
		5种定位: ①普通流定位【文档流定位】 将元素按照块、行、行块特点排列
		        ②浮动定位: 将元素飘起来, 作用: 左右布局
				定义: 让元素脱离文档流的一种定位方式, 用于页面文本和图片围绕以及布局,
				     一旦浮动, 转换为块元素
				float浮动属性: left、right、none 【定义浮动】
				clear清除属性：left、right、both 【清除浮动】
				③相对定位: 相对于父级, 按照body位置执行, 占用文档流
				④绝对定位: 针对于父级, 按照页面左顶角执行, 失去文档流
				左栏弹出: 相对定位+绝对定位 实现 【Jquery框架: 页面动态效果】
				⑤固定定位: 将元素固定定位在页面指定位置
				-->
				<!-- 浮动属性 -->
				<span class="d1">1</span>
				<span class="d2">2</span>
				<span class="d3">3</span>
				<span class="d4">4</span>
				<span class="d5">5</span>
	</body>
</html>